<template>
  <div class="children_content">
    <div :class="showMenu ? 'children_content_flex' : ''">
      <TypeMenu v-show="showMenu" v-model="typeId" :menu="menus" @change="typeIdChange" />
      <div :class="showMenu ? 'right_box' : ''">
        <component ref="componentRef" :is="componentName" :typeId="typeId" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, provide, markRaw } from 'vue'

import TypeMenu from '@/components/TypeMenu/index.vue'
import MyKnowledge from './MyKnowledge/index.vue'

// 分类菜单
const menus = ref([
  {
    title: '我的知识库',
    icon: 'ios-ionitron',
    name: MyKnowledge
  },
  {
    title: '资源库',
    icon: 'ios-copy'
  },
  {
    title: '发布管理',
    icon: 'ios-paper-plane'
  },
  {
    title: '模型管理',
    icon: 'ios-color-filter'
  },
  {
    title: '效果评测',
    icon: 'ios-speedometer'
  }
])

const typeId = ref(undefined)

const showMenu = ref(true)
const componentRef = ref(null)
const typeIdChange = (id) => {
  componentRef.value.getPageData(true)
}

provide('changeArrange', (val = false)=>{
  showMenu.value = val
})

provide('typeId', typeId)

const componentName = ref(null)
componentName.value = markRaw(MyKnowledge)
</script>

<style>

</style>